<!--
 * @Author: your name
 * @Date: 2021-04-07 09:11:19
 * @LastEditTime: 2021-04-27 22:19:30
 * @LastEditors: Please set LastEditors
 * @Description: 自定义按钮
 * @FilePath: /medicine-web/src/components/CustomBtn2/index.vue
-->
<template>
  <div class="custom-btn2-container">
    <button type="button" value="" class="custom-btn2__pattern" @click.stop="emitClick">
      {{btnStr}}
    </button>
  </div>
</template>
<script>
export default {
  name: 'customBtn2',
  props: {
    btnStr: {
      type: String,
      default: '取消收藏'
    }
  },
  methods: {
    emitClick (e) {
      this.$emit('handleClick', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.custom-btn2-container {
  .custom-btn2__pattern {
    padding: 4px 11px;
    color: #555;
    font-size: 14px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: transparent;
    cursor: pointer;
    white-space: nowrap;
  }
  .custom-btn2__pattern:hover {
    color: #57DBB6;
    border: 1px solid #57DBB6;
  }
}
</style>